<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-default">
            <form th:id="form-data" th:action="@{/managerInfo/add}" th:object="${managerInfo}" method="post">
                <div class="panel-body">
                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">用户名</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="text" class="form-control" th:field="*{userName}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入用户名" />
                        </div>
                    </div>

                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">密码</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="password" class="form-control" th:field="*{passWord}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入密码" />
                        </div>
                    </div>

                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">昵称</label>
                        <div class="col-sm-4 col-sm-inp">
                            <input type="text" class="form-control" th:field="*{nickName}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入昵称" />
                        </div>
                    </div>

                    <!-- 加载角色 -->
                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">角色</label>
                        <div class="col-sm-4 col-sm-inp">
                            <div id="treeView-checkbox-roles" class=""></div>
                        </div>
                        <input type="hidden" id="roles" name="roles"/>
                    </div>

                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">用户类型</label>
                        <div class="col-sm-4 col-sm-inp">
                            <select th:field="*{classify}" class="form-control code-select" data-clazz="classify" data-empty="请选择" data-th-value="*{classify}">
                            </select>
                        </div>
                    </div>

                    <!-- 加载菜单 -->
                    <div class="form-group clear">
                        <label class="col-sm-1 control-label search-label">菜单</label>
                        <div class="col-sm-4 col-sm-inp">
                            <!--<input type="text" class="form-control" th:field="*{menus}" maxlength="120" onfocus="clearErrorMsg()" placeholder="请输入菜单" />-->
                            <div id="treeView-checkbox-menus" class=""></div>
                        </div>
                        <input type="hidden" id="menus" name="menus"/>
                    </div>

                    <div class="clear errorMsg" id="errorMsg"></div>

                    <div class="panel-heading">
                        <div>
                            <button type="button" class="btn btn-sm btn-warning"
                                    th:onclick="'javascript:loadListData(\'' + @{/managerInfo/list} + '\')'">返回</button>&emsp;
                            <button type="button" class="btn btn-sm btn-success" onclick="checkParams()">确定</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script th:src="@{/manager/js/managerInfo.js}"></script>
<script th:src="@{/common/js/misc.js}"></script>
<script th:inline="javascript">
    $(function() {
        $.post(basePath + "managerRole/getRole", function(data) {
            let checkArr = [];
            let defaultData = [];

            var data = eval('(' + data + ')');

            let roles = data.data;
            for(let i = 0; i < roles.length; i++) {
                let obj = {
                    text: roles[i].roleName,
                    href: roles[i].id,
                    tags: [i]
                };
                defaultData.push(obj);
            }

            let checkboxTree = $('#treeView-checkbox-roles').treeview({
                data: defaultData,
                showIcon: false,
                showCheckbox: true,
                //showTags: true,
                //levels: 2,
                //enableLinks: true
                onNodeChecked: function(event, node) {
                    checkArr.push(node.href);
                    $("#roles").val(checkArr.join());
                    clearErrorMsg();
                },
                onNodeUnchecked: function (event, node) {
                    checkArr.splice(node.tags, 1);
                    $("#roles").val(checkArr.join());
                }
            });

            let findCheckboxNodess = function() {
                return checkboxTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
            };
            findCheckboxNodess();
        });

        $.post(basePath + "managerInfo/getMenu", function(data) {
            let checkArr = [];
            let defaultData = [];

            var data = eval('(' + data + ')');

            let menus = data.data;
            for(let i = 0; i < menus.length; i++) {
                if (menus[i].pid == null) {
                    let obj = {
                        text: menus[i].name,
                        href: menus[i].id,
                        tags: [i]
                    };

                    let nodes = [];
                    for (let j = 0; j < menus.length; j++) {
                        if (menus[j].pid != null && menus[j].pid === menus[i].id) {
                            let subMenu = {
                                text: menus[j].name,
                                href: menus[j].id,
                                tags: [j]
                            };
                            nodes.push(subMenu);
                        }
                    }

                    obj["nodes"] = nodes;

                    defaultData.push(obj);
                }
            }

            let checkboxTree = $('#treeView-checkbox-menus').treeview({
                data: defaultData,
                showIcon: false,
                showCheckbox: true,
                //showTags: true,
                levels: 2,
                //enableLinks: true
                onNodeChecked: function(event, node) {
                    checkArr.push(node.href);
                    $("#menus").val(checkArr.join());
                    clearErrorMsg();
                },
                onNodeUnchecked: function (event, node) {
                    checkArr.splice(node.tags, 1);
                    $("#menus").val(checkArr.join());
                }
            });

            let findCheckboxNodess = function() {
                return checkboxTree.treeview('search', [ $('#input-check-node').val(), { ignoreCase: false, exactMatch: false } ]);
            };
            findCheckboxNodess();
        });
    });
    MiscManager.loadSelect("form-data", basePath + "/select/load");
</script>
</html>
